import React, { useState, useEffect } from "react";
import { Menu, Button, Divider, Typography } from "antd";
import { PlusOutlined, UserOutlined } from "@ant-design/icons";
import styles from "./SpaceSidebar.module.less";
import Icon from "../../../utils/icons";

const { Text } = Typography;

const PERSONAL_SPACE_ID = "personal-space";

const SpaceSidebar = ({ onSelectSpace, selectedSpaceId }: any) => {
  // 示例数据，实际应用中应从API获取
  const [spaces] = useState([
    // 团队空间示例数据
    { id: "space1", name: "产品团队", icon: "Project", type: "team" },
    { id: "space2", name: "研发团队", icon: "Development", type: "team" },
    { id: "space3", name: "市场团队", icon: "Marketing", type: "team" },
  ]);

  // 初始化默认选中空间
  useEffect(() => {
    // 如果没有选中任何空间，或者列表为空，则选中个人空间
    if (
      !selectedSpaceId ||
      selectedSpaceId === "" ||
      (spaces.length === 0 && selectedSpaceId !== PERSONAL_SPACE_ID)
    ) {
      onSelectSpace(PERSONAL_SPACE_ID, "个人空间");
    }
  }, [selectedSpaceId, spaces, onSelectSpace]);

  // 团队空间列表（过滤出类型为'team'的空间）
  const teamSpaces = spaces.filter((space) => space.type === "team");
  // 判断是否有团队空间
  const hasTeamSpaces = teamSpaces.length > 0;

  const handleCreateTeamSpace = () => {
    console.log("创建团队空间");
    // 实际应用中应打开创建团队空间的表单或模态框
  };

  return (
    <div className={styles.sidebar}>
      <Menu
        mode="inline"
        selectedKeys={[selectedSpaceId]}
        className={styles.spaceMenu}
      >
        {/* 个人空间 - 始终显示 */}
        <Menu.Item
          key={PERSONAL_SPACE_ID}
          onClick={() => onSelectSpace(PERSONAL_SPACE_ID, "个人空间")}
          className={styles.spaceMenuItem}
        >
          <div className={styles.spaceItem}>
            <UserOutlined className={styles.spaceIcon} />
            <span className={styles.spaceName}>个人空间</span>
          </div>
        </Menu.Item>

        {/* 分隔线 */}
        <Divider className={styles.spaceDivider} />

        {/* 新建团队空间按钮 - 当没有团队空间时显示 */}
        {!hasTeamSpaces && (
          <div className={styles.createTeamContainer}>
            <Button
              type="text"
              icon={<PlusOutlined />}
              onClick={handleCreateTeamSpace}
              className={styles.createTeamButton}
            >
              新建团队空间
            </Button>
          </div>
        )}

        {/* 团队空间列表 - 只有当有团队空间时才显示 */}
        {hasTeamSpaces && (
          <>
            <div className={styles.spaceGroupTitle}>
              <Text type="secondary">团队空间</Text>
              {/* 添加"+"按钮在团队空间标题右侧 */}
              <Button
                type="text"
                size="small"
                icon={<PlusOutlined />}
                onClick={handleCreateTeamSpace}
                className={styles.addTeamButton}
              />
            </div>

            {teamSpaces.map((space) => (
              <Menu.Item
                key={space.id}
                onClick={() => onSelectSpace(space.id, space.name)}
                className={styles.spaceMenuItem}
              >
                <div className={styles.spaceItem}>
                  {space.icon && (
                    <Icon name={space.icon} className={styles.spaceIcon} />
                  )}
                  <span className={styles.spaceName}>{space.name}</span>
                </div>
              </Menu.Item>
            ))}
          </>
        )}
      </Menu>
    </div>
  );
};

export default SpaceSidebar;
